<template>
  <a-card title="容量详情" class="margin-bottom">
    <template #extra>
      <a-button><crown-outlined/>升级扩容</a-button>
    </template>
    <a-descriptions :column="1" :labelStyle="{width: '150px'}">
      <a-descriptions-item label="版本信息">基础版</a-descriptions-item>
      <a-descriptions-item label="成员数量">
        <a-space>
          <a-progress :percent="30" class="width-lg"/>
          <div style="margin-bottom: 4px">1 位成员 / 共 10 个名额</div>
        </a-space>
      </a-descriptions-item>
      <a-descriptions-item label="数据容量">
        <a-space>
          <a-progress :percent="15" class="width-lg"/>
          <div style="margin-bottom: 4px">1024 / 102400 条数据</div>
        </a-space>
      </a-descriptions-item>
    </a-descriptions>
  </a-card>
</template>

<script setup lang="ts">

import {CrownOutlined} from "@ant-design/icons-vue";
</script>

<style scoped>

</style>